<template>
  <div class="about_box">
    <div class="title"><Icon icon="shenfen"></Icon> <span>关于我</span></div>
    <div class="content">
      <li><span>网名：</span><span>搬砖代师</span></li>
      <li><span>职业：</span><span>Web开发工程师</span></li>
      <li><span>现居：</span><span>河北省-保定市</span></li>
      <li><span>Email：</span><span>lv0310@foxmail.com</span></li>
      <li><span>QQ：</span><span>2687672213</span></li>
      <li>
        <a
          title="点击发送会话"
          class="btn"
          target="_blank"
          href="tencent://message/?Menu=yes&uin=2687672213&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45"
          ><Icon icon="QQ"></Icon
        ></a>
        <a class="btn tm"><Icon icon="weChat"></Icon></a>
        <div class="weChat">
          <img
            src="http://www.lv666.top/IMG/1624269109683_0.21rdijo0b0w.jpg"
            alt="这是一张图片"
          />
        </div>
        <a
          title="点击给我发送Email"
          target="_blank"
          class="btn"
          href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=n-Ppr6yur9-58Ofy-vbzsfzw8g"
          ><Icon icon="Email"></Icon
        ></a>
        <a
          title="进入我gitee"
          class="btn"
          target="_blank"
          href="https://gitee.com/lzqbbb"
          ><Icon icon="Github"></Icon
        ></a>
      </li>
    </div>
  </div>
</template>
<script>
import Icon from "../IconFont";
export default {
  components: {
    Icon,
  },
  setup() {},
};
</script>
<style lang='less'>
@import url("../../assets/global/var.less");
.about_box {
  width: 380px;
  color: @navigation_bar_content_color;
  font-size: 16px;

  .global_border_shadow();

  .title {
    border-bottom: 1px solid #eee;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .title .icon {
    padding-right: 5px;
    color: orangered;
    font-size: 16px;
    vertical-align: middle;
  }
  .content {
    padding: 20px;
  }
  li {
    list-style: none;
    line-height: 2em;
    position: relative;
  }
  .btn {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;
    cursor: pointer;
    margin-left: 5px;
    border-radius: 5px;
    color: @navigation_bar_content_color;
    text-decoration: none;
    &:hover {
      background-color: @hover_bg_color;
    }
  }
  .btn .icon {
    font-size: 30px;
  }
  .weChat {
    display: inline-block;
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #fff;
    top: -210px;
    left: 10px;
    transition: all 0.5s;
    transform: scale(0);
    transform-origin: center bottom;
    border-radius: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tm {
    &:hover + .weChat {
      transition: all 0.5s;
      transform: scale(1);
    }
  }
}
</style>